
import styled from 'styled-components';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

import { TopHeader } from '../../components';
import { ApplicationLaunchpadPage } from './application-launchpad';
import { ApplicationStorePage } from './application-store';
import { ApplicationDevelopPage } from './application-develop';

export const ApplicationHomePage = (props: any) => {
    //{sub,file}
    const params = useParams();

    const [activeKey, setActiveKey] = useState<string>(params.sub === 'appstore' ? 'appstore' : 'desktop');

    const [version, setVersion] = useState<number>(0);

    useEffect(() => {
        if (params.sub === 'appstore' || params.sub === 'desktop') {
            setActiveKey(params.sub);
        }
    }, [params.sub]);
    return (
        <Container>
            <Header>
                <TopHeader
                    items={[
                        {
                            key: 'desktop',
                            label: '我的桌面',
                        },
                        {
                            key: 'appstore',
                            label: '应用商店',
                        }
                    ]}
                    activeKey={activeKey}
                    onChange={async (key: string) => {
                        setActiveKey(key);
                    }}></TopHeader>
            </Header>
            <Content>
                <ApplicationLaunchpadPage style={activeKey === 'desktop' ? {} : { display: 'none' }} version={version}></ApplicationLaunchpadPage>
                <ApplicationStorePage style={activeKey === 'appstore' ? {} : { display: 'none' }} onChange={async () => {
                    setVersion(new Date().getTime());
                    setActiveKey('desktop');
                }}></ApplicationStorePage>
            </Content>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    min-height: 45px;
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;

const Content = styled.div`
    flex:  1;
    width: 100%;
    overflow: hidden;
`;